<template>
  <a-card>
    <div style="display: flex; justify-content: flex-end; margin-bottom: 20px">
      <a-button type="primary" icon="plus" @click="showModal()">{{
        $t("user.v148")
      }}</a-button>
    </div>
    <!-- <p>数据保护等级说明：</p> -->
    <!-- <p style="margin-bottom: 10px;">数据从低到高分BP/G2,SP/G3,HP.G4/HP.G5共四个级别</p> -->
    <!-- <a-form layout="inline"> -->
    <!-- <a-form-item>
        <a-input placeholder="搜索" />
      </a-form-item> -->
    <!-- <a-form-item> -->
    <!-- <a-button type="primary" icon="plus" @click="showModal()">{{ $t( 'user.verification-code.required111566110577114') }}</a-button> -->
    <!-- </a-form-item>
    </a-form> -->
    <a-table
      :pagination="false"
      :data-source="listData"
      :rowKey="(record) => record.Id"
    >
      <a-table-column key="Id" data-index="Id">
        <span slot="title" class="min-w-90p">{{
          $t("user.verification-code.required111566110577115")
        }}</span>
      </a-table-column>
      <a-table-column
        key="ProtectionLevel"
        :title="$t('user.verification-code.required1115661105783')"
      >
        <template slot-scope="text, record">
          <span>{{
            isLang ? record.ProtectionLevel : record.ProtectionLevel
          }}</span>
        </template>
      </a-table-column>
      <a-table-column
        key="ProtectionIllustrate"
        data-index="ProtectionIllustrate"
      >
        <span slot="title" class="min-w-90p">{{
          $t("user.verification-code.required111566110577116")
        }}</span>
      </a-table-column>
      <a-table-column key="action" :title="$t('app.setting.othersettings')">
        <template slot-scope="text, row">
          <span>
            <a-button type="link" @click="showModal(row.Id)">{{
              $t("user.verification-code.required111566147")
            }}</a-button>
            <a-popconfirm
              :title="$t('user.verification-code.required111566110577223')"
              :ok-text="$t('user.verification-code.required1166')"
              :cancel-text="$t('user.email.required11')"
              @confirm="handleClickDelete(row.Id)"
              @cancel="cancel"
            >
              <a-button type="link">{{ $t("app.setting.copy") }}</a-button>
            </a-popconfirm>
          </span>
        </template>
      </a-table-column>
    </a-table>
    <!-- 分页 -->
    <a-pagination
      size="small"
      v-model="queryForm.page"
      :total="total"
      hideOnSinglePage
      :pageSize.sync="queryForm.pageSize"
      @change="getList"
    />

    <a-drawer
      :title="modalTitle"
      placement="right"
      :closable="false"
      :visible="modalVisible"
      @close="closeDrawer"
      :width="500"
    >
      <a-form
        v-model="addForm"
        labelAlign="left"
      >
        <a-form-item
          :label="$t('user.verification-code.required111566110577115')"
          v-show="addForm.id"
          class="sp-item"
        >
          {{ addForm.id }}
        </a-form-item>
        <a-form-item
          :label="$t('user.verification-code.required1115661105783')"
        >
          <a-input
            v-model="addForm.ProtectionLevel"
            :placeholder="$t('user.v150')"
        /></a-form-item>
        <a-form-item
          :label="$t('user.verification-code.required111566110577116')"
          :style="isLang ? 'margin-left: -28px' : ''"
        >
          <a-input
            v-model="addForm.ProtectionIllustrate"
            :placeholder="$t('user.v152')"
        /></a-form-item>
      </a-form>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'center',
          zIndex: 1,
        }"
      >
        <a-button style="margin-right: 8px" @click="closeDrawer">{{
          $t("user.email.required11")
        }}</a-button>
        <a-button type="primary" @click="subAddForm">{{
          $t("user.verification-code.required1166")
        }}</a-button>
      </div>
    </a-drawer>
  </a-card>
</template>

<script>
import {
  protectionLists,
  protectionCreate,
  protectionChange,
  protectionDelete,
  protectionDetials,
} from "@/api/ytdg";
const columns = [
  {
    title: "序号",
    dataIndex: "Id",
    align: "center",
  },
  {
    title: "系统保护等级",
    dataIndex: "ProtectionLevel",
    align: "center",
  },
  {
    title: "等级说明",
    dataIndex: "ProtectionIllustrate",
    align: "center",
  },
  {
    title: "操作",
    width: "150px",
    dataIndex: "",
    align: "center",
    scopedSlots: { customRender: "action" },
  },
];
export default {
  data() {
    return {
      columns,
      modalVisible: false,
      modalTitle: "",
      isLang: localStorage.getItem("lang").includes("zh-CN"),
      listData: [],
      total: 0,
      queryForm: {
        page: 1,
        pageSize: 10,
      },
      addForm: {
        ProtectionLevel: undefined,
        ProtectionIllustrate: undefined,
      },
      isLang: localStorage.getItem("lang").includes("zh-CH"),
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    let that = this;
    window.addEventListener("setItemEvent", function (e) {
      if (e.key == "lang") {
        let lang = JSON.parse(e.value);
        if (lang == "zh-EN") {
          that.isLang = false;
        } else {
          that.isLang = true;
        }
      }
    });
  },
  methods: {
    getList() {
      protectionLists(this.queryForm).then((res) => {
        this.listData = res.data.Lists;
        this.total = res.data.Total;
      });
    },
    showModal(id) {
      if (id) {
        this.modalTitle = this.$t(
          "user.verification-code.required111566110577130"
        );
        protectionDetials({ id }).then((res) => {
          this.addForm = res.data[0];
          this.addForm.id = id;
        });
      } else {
        this.modalTitle = this.$t(
          "user.verification-code.required111566110577131"
        );
      }
      this.modalVisible = true;
    },
    // 关闭抽屉
    closeDrawer() {
      this.addForm = {
        ProtectionLevel: undefined,
        ProtectionIllustrate: undefined,
        id: undefined,
      };
      this.modalVisible = false;
    },

    // 新增
    subAddForm() {
      if (this.addForm.id) {
        protectionChange(this.addForm).then(
          () => {
            this.$message.success(
              this.$t("user.verification-code.required111566110577229")
            );
            this.getList();
            this.closeDrawer();
          },
          (err) => {
            this.$message.error(err);
          }
        );
      } else {
        protectionCreate(this.addForm).then(
          () => {
            this.$message.success(
              this.$t("user.verification-code.required111566110577230")
            );
            this.getList();
            this.closeDrawer();
          },
          (err) => {
            this.$message.error(err);
          }
        );
      }
    },

    // 删除
    handleClickDelete(id) {
      protectionDelete({ id }).then((res) => {
        this.$message.success(
          this.$t("user.verification-code.required111566110577133")
        );
        this.getList();
      });
    },
    cancel() {
      this.$message.warning(
        this.$t("user.verification-code.required111566110577231")
      );
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.ant-form-item-label {
  display: inline-block;
  overflow: visible !important;
  line-height: 39.9999px;
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
}
:deep(.sp-item) {
  .ant-form-item-label-left {
    padding-left: 2px;
    width: 50px;
    text-align: left;
  }
}
</style>
